{literal}
    <style>
        #scroll-pane {
            float: left;
            width: 200px;
            overflow: auto;
            height: 300px;
        }
        .horizontal-only {
            height: auto;
            max-height: 200px;
        }
</style>
    <script type="text/javascript" src="js/jquery.popupWindow.js"></script>
    <script type="text/javascript"> 
        jQuery(document).ready(function(){
            $('.openInNewWindow').popupWindow({
                        width: 770,
                        centerBrowser:1 
                    });
        });
    </script>
{/literal}
<div style="left:20px; top:20px;  position: relative"><h3>Itinerary List</h3></div>
<span id="scroll-pane" style="left:20px; top:20px; position: relative">
    <ul>
        {for $index=0 to $bookingCount-1}
            <li><a class="openInNewWindow" href="http://travel.ian.com/index.jsp?pageName=viewOrCancelReservation&currencyCode=EUR&additionalDataString=vrBookingSource|index&locale=en_us_US&cid=550555&itineraryID={$booking[$index]['itineraryId']}&email={$booking[$index]['email']}">
                    <h5>Itinerary id: {$booking[$index]['itineraryId']} - Location: {$booking[$index]['location']}, Creation date: {$booking[$index]['bookingDate']}, Number of guests: {$booking[$index]['numberOfGuests']}, E-mail used: {$booking[$index]['email']}</h5>
                </a>
            </li>
        {/for}
    </ul>
</span>

<div align=center style="margin: 0 auto; width:50%; position: absolute">
    <div id="confirmationPage">
        <table id="confirmationForm">
            <tr><td class="title"><b>Itinerary details</b></td></tr>
       <tr><td>
        <div>
            <table class="wide borderTable">
                <tr><td>Your Itinerary number:{$itinerariId}</td></tr>
                <tr><td>Your Booking Confirmation Number(s):
                    {for $index=0 to $roomsNumber-1}
                        {$confirmationNumber[$index]}
                        {if $index != $roomsNumber-1},{/if}
                    {/for}
                </td></tr>
             </table>
             <table class="wide">
                <tr><td class="title"><b>Reservation Details</b></td></tr>
                <tr><td>{$tripAdvisorRating[0]}</td></tr>
            </table>
            <div class="borderedItems">
                <table>
                    <tr>
                        <td>Check-in:</td>
                        <td>{$checkInDate[0]}</td>
                    </tr>
                    <tr>
                        <td>Check-out:</td>
                        <td>{$checkOutDate[0]}</td>
                    </tr>
                    <tr>
                        <td>Number of nights:</td>
                        <td>{$numberOfNights[0]}</td>
                    </tr>
                    <!--<tr>
                        <td>Guests:</td>
                        <td></td>
                    </tr>-->
                    <tr>
                        <td>Room type:</td>
                        <td>{$roomDescription[0]}</td>
                    </tr>
                    <tr>
                        <td>Rooms:</td>
                        <td>{$roomsNumber}</td>
                    </tr>
                </table>
            </div>
            {for $index=0 to $roomsNumber-1}
                <div class="title"><b>Room {$index+1}</b></div>
                <table class="wide borderedItems">
                    <tr>
                        <td width="30%">Guests:</td>
                        <td width="70%">
                            {$rooms[$index]['firstName']}
                            {$rooms[$index]['lastName']},
                            {$rooms[$index]['numberOfAdults']} Adult(s)
                            {$rooms[$index]['numberOfChildren']} Child(ren)
                        </td>
                    </tr>
                </table>
            {/for}
                <div id="specialRequest" class="footerNotes">
                    *Please note: Special requests can not be guaranteed. Special requests are subject to availability upon check-in and may incur aditional charges.
                </div>
                <div id="charges" class="title"><b>Charges</b></div>
                <div>All prices are displayed in {$currency[0]}</div>
                <div id="chargesValue">
                    <table><tbody>
                    {for $index=0 to $roomsNumber-1}

                            <tr>
                                <td>Room {$index+1}</td>
                                <td>{$totalNoTax[$index]} {$currency[0]}</td>
                            </tr>
                            {if $index == $roomsNumber-1}
                                <tr>
                                    <td style="color: red;">Tax Recovery Charges and Service Fees:</td>
                                    <td>{$taxRecoveryChargesAndFees} {$currency[0]}</td>
                                </tr>
                            {/if}

                    {/for}
                    </tbody></table>
                </div>
                <div id="chargeableTotal">Total Charges:** {$totalPrice} {$currency[0]}</div>
                <div class="footerNotes">
                    <div>*Excluding tax recovery charges and service fees</div>
                    <div>**Including tax recovery charges and service fees</div>
                    <div>Your credit card has been charged for the full payment of this reservation.</div>
                </div>
                <div class="title"><b>Payment Information</b></div>
                <div>
                    <table>
                        <tr>
                            <td><b>Billing Address:</b></td>
                            <td>{$billingAddress}</td>
                        </tr>
                        <tr>
                            <td><b>Email Address:</b></td>
                            <td>{$emailAddress}</td>
                        </tr>
                        <tr>
                            <td><b>Phone number:</b></td>
                            <td>{$phoneNumber}</td>
                        </tr>
                    </table>
                </div>
                <div class="title"><b>Aditional Information</b></div>
                <div><b>Cancelation Policy</b></div>
                <table class="wide borderedItems">
                {for $index=0 to $roomsNumber-1}
                    <tr>

                        <td><div class="title"><b>Room {$index+1}</b></div></td>
                    </tr>
                    <tr>
                        <td>{$cancelationPolicy[$index]}</td>
                    </tr>
                {/for}
                </table>
            </div>
        </td>
       </tr>
    </table>
    </div>
</div>